<template>
  <div class="rightOneDiv">
    <div v-for="(item, index) in list" :key="index" class="listDiv">
      <div class="listTitle">{{ item.title }}</div>
      <div class="listVal">
        {{ item.num }} <span>{{ item.unit }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "全厂装机容量",
          num: "4610",
          unit: "MW",
        },
        {
          title: "全厂发电量(实时)",
          num: "400",
          unit: "万kwh",
        },
        {
          title: "全厂发电量(昨日)",
          num: "3200",
          unit: "万kwh",
        },
        {
          title: "全厂发电量(月累计)",
          num: "333400",
          unit: "万kwh",
        },
        {
          title: "全厂发电量(年累计)",
          num: "583333",
          unit: "万kwh",
        },
        {
          title: "平均负荷",
          num: "610",
          unit: "MW",
        },
        {
          title: "发电煤耗",
          num: "291",
          unit: "g/kwh",
        },
        {
          title: "正平衡煤耗(昨日)",
          num: "291",
          unit: "g/kwh",
        },
        {
          title: "反平衡煤耗(昨日)",
          num: "291",
          unit: "g/kwh",
        },
        {
          title: "上网电量(昨日)",
          num: "291",
          unit: "g/kwh",
        },
      ],
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.rightOneDiv {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  .listDiv {
    width: 206px;
    height: 89px;
    background: url("@/assets/images/right/rightTopBg.png") no-repeat;
    padding: 15px;
    text-align: center;
    .listTitle {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .listVal {
      font-size: 28px;
      color: #00ffff;
      span {
        font-size: 14px;
      }
    }
  }
}
</style>
